<template>
	<MainPage>
		<template v-slot:HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="配送日期" prop="send_time">
					<el-date-picker
						v-model="form.send_time"
						type="date"
						class="wid220"
						:editable="false"
						placeholder="选择配送日期"
						value-format="yyyy-MM-dd"
						:clearable="false"
						@change="getArticleList"
					/>
				</el-form-item>
				<el-form-item label="商品分类" prop="category_id" class="wid220">
					<el-cascader
						v-model="form.category_id"
						:options="options"
						:props="defaultProps"
						ref="cascaderHandle"
						collapse-tags
					></el-cascader>
				</el-form-item>
				<el-form-item label="商品名称" prop="goods_spu_id">
					<change-goods-input
						ref="changeGoodsInput"
						@clear="
							() => {
								form.goods_spu_id = '';
							}
						"
						@sendValue="
							(data) => {
								form.goods_spu_id = data.id;
							}
						"
					></change-goods-input>
				</el-form-item>
				<!-- <div class="clearfix"></div> class="marginTop10"-->
				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template v-slot:HeaderRight
			><el-button @click="batchCreactOrder"> 批量生成加工单</el-button>
		</template>
		<template v-slot:TableLeft
			>1.商品生成了加工单后不会再出现在列表
			2.配送中订单（含已完成）预定量，库存不会再汇总计算
		</template>
		<template v-slot:Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
				:row-class-name="getRowClass"
				:header-cell-class-name="$verticaline"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="expand" class-name="main_hei">
					<template slot-scope="scope">
						<div class="expand_table">
							<el-table
								:ref="'expandchild' + scope.$index"
								:data="scope.row.order_list"
								class="mainex_ta"
								fit
								:row-class-name="getRowClass"
								:highlight-current-row="false"
								:key="scope.row.goods_spu_id"
							>
								<el-table-column label="订单号" prop="order_sn" />
								<el-table-column label="用户名称" prop="nickname">
									<template slot-scope="scope">
										{{ scope.row.nickname
										}}<span v-if="scope.row.zid_name"
											>【{{ scope.row.zid_name }}】</span
										>
									</template>
								</el-table-column>

								<el-table-column label="预定量" prop="order_num" />
							</el-table>
						</div>
					</template>
				</el-table-column>
				<!-- :render-header="renderheader"  -->
				<!-- <el-table-column width="50">
					<template v-slot:header>
						<el-checkbox
							v-model="checkAll"
							@change="(val) => changeAll(val)"
						></el-checkbox>
					</template>
					<template slot-scope="scope">
						<el-checkbox
							v-model="scope.row.checked"
							@change="(val) => oneChange(val, scope.row)"
						></el-checkbox>
					</template>
				</el-table-column> -->
				<el-table-column type="selection" />
				<el-table-column
					label="工艺名称"
					prop="formula_name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="成品"
					prop="name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="预定总量"
					prop="order_num"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="成品库存"
					prop="inventory"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="加工中库存"
					prop="in_pass_num"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="待加工数量"
					prop="purchase_num"
					:show-overflow-tooltip="true"
				/>
				<el-table-column label="操作" width="240" align="center" fixed="right">
					<template slot-scope="scope">
						<el-link
							type="primary"
							v-show="!scope.row.inventory_enough"
							@click="createOrder(scope)"
							v-repeatClick
							>生成加工单</el-link
						>
						<el-link
							type="warning"
							v-show="scope.row.inventory_enough"
							v-repeatClick
							@click="enoughInventory(scope)"
							>确认库存充足</el-link
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import { recursion, category, parseTime, getyesterday } from "@/utils/index";
	import {
		formulaList_index,
		batchAdd,
		enoughInventory,
	} from "@/api/sorting/processIndex";
	import { process_add } from "@/api/sorting/processOrder";
	export default {
		components: {
			MainPage,
		},
		data() {
			return {
				parseTime,
				form: {
					name: "",
					pid: "",
					category_id: [],
					goods_spu_id: "",
					send_time: parseTime(new Date(), "{y}-{m}-{d}"),
				},
				listLoading: false,
				options: [],
				defaultProps: {
					children: "selfNext",
					label: "title",
					value: "id",
					multiple: true,
				},
				list: [],
				checkAll: false,
				selectArr: [],
			};
		},
		created() {
			this.formulaList_index();
		},
		methods: {
			// 监听全选
			handleSelectionChange(val) {
				this.selectArr = [];
				this.selectArr = val;
			},
			// 搜索
			getArticleList() {
				this.formulaList_index();
			},
			//重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				if (this.$refs["changeGoodsInput"]) {
					this.$refs["changeGoodsInput"].name = "";
				}
				this.getArticleList();
			},
			renderheader(h, { column, $index }) {
				return h("el-checkbox", {
					// 表示属性
					attrs: {
						effect: "dark",
					},
					props: {
						value: this.checkAll,
					},
					on: {
						change: (val) => {
							this.changeAll(val);
						},
					},
				});
			},
			// 一级选择
			oneChange(val, row) {
				row.order_list.map((e) => (e.checked = val));
			},
			// 选择全部
			changeAll(val) {
				//   this.checkAll = val;
				console.log(this.checkAll);
				this.$forceUpdate();
				// 全选反选
				//   this.list.map((e) => {
				//     e.checked = val;
				//     e.order_list.map((p) => {
				//       p.checked = val;
				//     });
				//   });
			},
			getRowClass(row) {
				row.row.index = row.rowIndex;
				if (row.row.order_list) {
					if (row.row.order_list.length === 0) {
						return "row-expand-cover";
					}
				}
			},
			handle(array) {
				let arr = [];
				array.map((e) => {
					arr.push(e[1]);
				});

				arr = JSON.stringify(arr);
				return arr;
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				let array = JSON.parse(JSON.stringify(form.category_id));
				form.category_id = this.handle(array);
				return form;
			},
			formulaList_index() {
				this.listLoading = true;
				let data = Object.assign({}, this.list_form());
				formulaList_index(data).then((res) => {
					if (res.errcode == 0) {
						this.options = recursion(res.data.category, false);
						res.data.list.map((e) => {
							e.inventory_enough = false;
							if (Number(e.inventory) >= Number(e.order_num)) {
								e.inventory_enough = true;
							} else {
								e.inventory_enough = false;
							}
						});
						this.list = res.data.list;
						this.$nextTick(() => {
							this.list.forEach((row) => {
								this.$refs.multipleTable.toggleRowSelection(row, true);
							});
						});
					} else {
						this.$message.error(res.errmsg);
					}
					this.listLoading = false;
				});
			},
			// 生成加工单
			createOrder(scope) {
				let arr = [];
				let use_inventory = [];
				scope.row.order_list.map((e) => {
					arr.push(e.order_list_id);
					use_inventory.push({
						id: e.order_list_id,
						use_inventory: e.use_inventory,
					});
				});
				let data = {
					fid: scope.row.fid,
					process_num: scope.row.purchase_num,
					olids: arr.join(","),
					use_inventory: JSON.stringify(use_inventory),
				};

				process_add(data).then((res) => {
					if (res.errcode == 0) {
						this.$message.success("生成加工单成功");
						this.formulaList_index();
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			batchCreactOrder() {
				if (this.selectArr.length == 0) {
					return this.$message.warning("请选择需要生成的加工单");
				}
				let message = `已选择【${this.selectArr.length}】个工艺，是否生成加工单`;
				this.$confirm(message, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						this.batchAdd();
					})
					.catch(() => {});
			},
			batchAdd() {
				let arr = [];
				let use_inventory = [];
				let olids = [];
				this.selectArr.map((e) => {
					e.order_list.map((e) => {
						olids.push(e.order_list_id);
						use_inventory.push({
							id: e.order_list_id,
							use_inventory: e.use_inventory,
						});
					});
					arr.push({
						fid: e.fid,
						process_num: e.purchase_num,
						olids: olids.join(","),
						use_inventory: JSON.stringify(use_inventory),
					});
				});
				let data = {
					list: JSON.stringify(arr),
				};
				batchAdd(data).then((res) => {
					if (res.errcode == 0) {
						this.$message.success("批量生成加工单成功");
					} else {
						this.$message.error(res.errmsg);
					}
					this.formulaList_index();
				});
			},
			// 确认库存充足
			enoughInventory(scope) {
				let arr = [];
				arr = scope.row.order_list.map((e) => {
					return e.order_list_id;
				});
				let data = {
					fid: scope.row.fid,
					olids: arr.join(","),
				};
				enoughInventory(data).then((res) => {
					if (res.errcode == 0) {
						this.$message.success("操作成功");
					} else {
						this.$message.error(res.errmsg);
					}
					this.formulaList_index();
				});
			},
		},
	};
</script>
<style lang='scss' scoped>
.expand_table {
	padding: 0 60px;
}
</style>
